<template>
	<div style="overflow: auto;text-align:center">
		<el-table
			ref="table"
			align="left"
			class="room-table"
			:loading="listLoading"
			row-class-name="row-table"
			:data="tableData"
			:show-summary="showSummary"
			:summary-method="getSummaries"
			style="width: 99.9%;text-align: center"
			stripe
			fit
			width="auto"
			:height="tableHeight"
			@selection-change="handleSelectionChange"
			@sort-change="sortChange"
			@row-click="getRowData"
			@cell-click="getCellData"
			@expand-change="handleExpandRow"
			empty-text=""
		>
			<!-- 单元格展开 -->
			<template>
				<el-table-column v-if="isExpand" type="expand">
					<template scope="scope">
						<slot name="expand" :$index="scope.$index" :row="scope.row"></slot>
					</template>
				</el-table-column>
			</template>
			<template v-for="colConfig in colConfigs">
				<!-- 单元格操作 -->
				<slot
					v-if="colConfig.slot"
					:name="colConfig.slot"
					props="config.slot"
				/>
				<el-table-column
					:key="colConfig.id"
					v-bind="colConfig"
					aligh="center"
					:sortable="colConfig.sortable"
					show-overflow-tooltip
					row-style="height:40px"
					:width="colConfig.width"
				/>
			</template>
		</el-table>
		<div class="block">
			<el-pagination
				background
				:page-size="10"
				layout="total, sizes, prev, pager, next"
				:hide-on-single-page="hideOnPage"
				:total="total"
				@size-change="changePageSize"
				@current-page="refreshList"
				@current-change="refreshList"
			/>
		</div>
	</div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
	props: {
		colConfigs: Array,
		tableData: Array,
		listData: Array,
		listLoading: { default: true },
		total: Number,
		showSummary: {
			default: false,
			type: Boolean,
		},
		isExpand: {
			type: Boolean,
			required: false,
		},
		isExpandOne: {
			type: Boolean,
			required: false,
		},
		hideOnPage: {
			type: Boolean,
			default: true
		}

    /*
     * pagesize: Number,
     * pageindex: Number
     */
	},
	data () {
		return {
			pageSizes: [ 10, 30, 50, 100 ],
			value: true,
			currentPageVal: null,
			orderVal: {},
			pageSizeCount: 10,
			tableHeight: null,
			loading: true,
			autoScroll: {
				type: Boolean,
				default: true,
			},
			totals: null,
		}
	},
	watch: {
		total ( newVal, oldVal ) {
			this.totals = newVal // newVal即是chartData
		},
	},
	mounted () {
		this.$nextTick( () => {
			// const scrollHeight = this.$refs.table.bodyWrapper.scrollHeight
			this.$refs.table.bodyWrapper.scrollTop = 0
			this.$refs.table.bodyWrapper.scrollLeft = 0
		} )
	},
	methods: {
		refreshList ( val ) {
			this.currentPageVal = val
			if ( val === undefined ) {
				this.currentPageVal = 1
			} else {
				this.currentPageVal = val
			}
			this.$emit( 'refreshList', {
				pageindex: this.currentPageVal,
				pagesize: this.pageSizeCount,
			} )
			if ( this.autoScroll ) {
				scrollTo( 0, 800 )
			}
		},
		changePageSize ( pagesize ) {
			this.pageSizeCount = pagesize
			this.currentPageVal = 1
			this.refreshList()
			if ( this.autoScroll ) {
				scrollTo( 0, 800 )
			}
		},
		sortChange ( column, prop, order ) {
			if ( column.order === 'ascending' ) {
				this.orderVal = {
					sort: column.prop,
					order: 'asc',
				}
			} else {
				this.orderVal = {
					sort: column.prop,
					order: 'desc',
				}
			}
			this.$emit( 'sortChange', this.orderVal )
			this.refreshList()
			if ( this.autoScroll ) {
				scrollTo( 0, 800 )
			}
		},
		handleSelectionChange ( val ) {
			//  传值父组件 Multiple selection
			this.$emit( 'handleMulSelection', val )
		},
		getSummaries ( val ) {
			//  求和
			this.$emit( 'getSummaries', val )
		},
		// 获取行数据
		getRowData ( row, column, cell, event ) {
			let cellObj = {
				row: row,
				column: column
			}
			this.$emit( 'getRowData', cellObj )
		},
		getCellData ( row, column, cell, event ) {
			let cellObj = {
				row: row,
				column: column
			}
			this.$emit( 'getCellData', cellObj )
		},
		handleExpandRow ( row, expandRows ) {

      /*
       * 列表展开
       */
			console.log( row, expandRows )
			/* if ( this.isExpandOne ) {
				this.$refs.raw_table.store.states.expandRows
					= expandRows.length !== 0 ? [ row ] : []
			} else {
			} */
			this.$emit( 'handleExpandRow', row )
		},
	},
}
</script>
<style lang="less">
.tr {
	margin-bottom: 5px;
}
.block {
	margin-top: 20px;
	text-align: right;
}
.el-table th {
	background-color: #f8f8f8;
	color: #333333;
	font-weight: 500;
}
.el-table th,
.el-table tr {
	// background-color: #f8f8f8;
	color: #333;
	min-width: 52px;
}
</style>
